import React, {FC, useContext, useEffect} from 'react';
import {FormattedMessage, Outlet, useAccess} from "umi";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import "./AuthWrapper.less"
import logo from "@/assets/img/logo.png";
import {history, useModel} from "@@/exports";
import {Form, Input, Tooltip} from "antd";
import {nanoid} from "nanoid";
import {CloseSquareFilled} from "@ant-design/icons";


const AuthWrapper: FC = () => {
  const {initialState, setInitialState} = useModel('@@initialState');
  const currentAuthInfo = initialState?.currentAuthInfo;
  const access = useAccess();

  if (access.isLogined) {
    window.location.assign(`/`);
    return;
  }


  const {setLayoutBgClassName, isZhCN} = useContext(HxConfigContext)
  useEffect(() => {
    setLayoutBgClassName?.("bg-grey-full");
    return () => {
      setLayoutBgClassName?.(undefined);
    }
  }, []);

  return <div className={"auth-wrapper-container"}>
    <div className={"auth-wrapper"}>
      <div className={"auth-wrapper-header"}>
        <div className={"auth-wrapper-logo"}>
          <img src={logo}/>
        </div>
        <div className={`auth-wrapper-title auth-wrapper-title-${isZhCN ? "cn" : "en"}`}>

          <div className={"auth-wrapper-publishers"}>
            <FormattedMessage id="about.publishers"/>
          </div>
          <div className={"auth-wrapper-sitename"}>
            <FormattedMessage id="about.site-name"/>
          </div>
        </div>
      </div>
      <div className={"auth-wrapper-content"}>
        <Outlet/>
      </div>
    </div>
  </div>

};


export default AuthWrapper;
